<!-- 景点卡片 -->
 <!-- components/ui/AttractionCard.vue -->
<template>
    <div 
      class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg cursor-pointer"
      @click="$emit('click')"
    >
      <!-- 图片区域 -->
      <div class="h-48 bg-gray-100 relative">
        <img 
          :src="attraction.image" 
          :alt="attraction.name"
          class="w-full h-full object-cover"
        />
        <span class="absolute top-2 right-2 bg-blue-600 text-white px-3 py-1 rounded-full text-sm">
          {{ attraction.category }}
        </span>
      </div>
  
      <!-- 内容区域 -->
      <div class="p-4">
        <div class="flex justify-between items-start mb-2">
          <h3 class="text-lg font-semibold">{{ attraction.name }}</h3>
          <div class="flex items-center">
            <span class="text-yellow-400 mr-1">
              <font-awesome-icon 
                v-for="star in fullStars"
                :key="'full-' + star"
                icon="star"
              />
              <font-awesome-icon 
                v-if="hasHalfStar"
                icon="star-half-alt"
              />
              <font-awesome-icon
                v-for="star in emptyStars"
                :key="'empty-' + star"
                :icon="['far', 'star']"
              />
            </span>
            <span class="text-gray-500 text-sm">({{ attraction.reviews }})</span>
          </div>
        </div>
        <p class="text-gray-600 text-sm line-clamp-2">{{ attraction.description }}</p>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  const props = defineProps({
    attraction: {
      type: Object,
      required: true,
      default: () => ({
        id: 0,
        name: '',
        category: '',
        rating: 0,
        reviews: 0,
        image: '',
        description: ''
      })
    }
  })

//   defineProps({
//   attraction: {
//     type: Object,
//     default: () => ({
//       image: 'default-image.jpg' // 默认图片
//     })
//   }
// })
  
  // 计算星级评分
  const fullStars = computed(() => Math.floor(props.attraction.rating))
  const hasHalfStar = computed(() => props.attraction.rating % 1 >= 0.5)
  const emptyStars = computed(() => 5 - Math.ceil(props.attraction.rating))
  </script>